<template>
	<view class="box">
		<view style="font-size: 40rpx;font-weight: bold;padding: 20rpx;">{{info.title}}</view>
		<view style="font-size: 30rpx;padding: 20rpx;color: #949393;">阅读量：{{info.read_num}} <text style="display: inline-block;margin-left: 30rpx;">时间：{{info.createtime}}</text></view>
		<view v-html="info.content"></view>
		<view style="display: flex;justify-content: space-evenly; background: #e4f7e9; padding: 30rpx;">
			<view @click="goUp(updata.id)" style="width: 49%;">
				<view>上一篇</view>
				<view style="overflow:hidden;text-overflow: ellipsis;-webkit-line-clamp: 2;display: -webkit-box; -webkit-box-orient: vertical;">
					{{updata.title}}
				</view>
			</view>
			<view style="background-color: #a2dea5;width: 0.5%;  margin: 0 0.5%;"></view>
			<view @click="goDown(downdata.id)" style="width: 49%;text-align: right;">
				<view>下一篇</view>
				<view style="overflow:hidden;text-overflow: ellipsis;-webkit-line-clamp: 2;display: -webkit-box; -webkit-box-orient: vertical;">
					{{downdata.title}}
				</view>
			</view>
		</view>
		<view class="btn" @click="shoucang(info.id)">
			<u-icon :name="is_shoucang?'star-fill':'star'" :color="is_shoucang?'#e2e21d':'#ccc'" size="36"></u-icon>
			<view style="font-size: 24rpx;">{{is_shoucang?'已收藏':'收藏'}}</view>
		</view>
		<view class="btn2" @click="dianzan(info.id)">
			<u-icon :name="is_dianzan?'thumb-up-fill':'thumb-up'" :color="is_dianzan?'#e2e21d':'#ccc'" size="36"></u-icon>
			<view style="font-size: 24rpx;">{{is_dianzan?'已点赞':'点赞'}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				otions:[],
				info:[],
				is_shoucang:false,
				is_dianzan:false,
				updata:[],
				downdata:[]
			}
		},
		onLoad(options) {
			this.options = options;
			this.getInfo(options.id);
		},
		onShareAppMessage() {
			
		},
		onShareTimeline() {
			
		},
		methods: {
			getInfo(id){
				var _this = this;
				_this.$http('article.getArticleDesc',{
					id:id
				}).then(res=>{
					_this.info = res.data.info;
					_this.is_shoucang = res.data.info.is_shoucang;
					_this.is_dianzan = res.data.info.is_dianzan;
					_this.updata = res.data.updata;
					_this.downdata = res.data.downdata;
				})
			},
			shoucang(id){
				var _this = this;
				_this.$http('article.shoucang',{
					id:id,
					is_shoucang:_this.is_shoucang,
				}).then(res=>{
					if(res.code == 1){
						_this.is_shoucang = !_this.is_shoucang;
					}
				})
			},
			dianzan(id){
				var _this = this;
				_this.$http('article.dianzan',{
					id:id,
					is_dianzan:_this.is_dianzan,
				}).then(res=>{
					if(res.code == 1){
						_this.is_dianzan = !_this.is_dianzan;
					}
				})
			},
			goUp(id){
				if(id>0){
					uni.redirectTo({
						url:'/pages/index/article_desc?id='+id
					})
				}
			},
			goDown(id){
				if(id>0){
					uni.redirectTo({
						url:'/pages/index/article_desc?id='+id
					})
				}
			}
		}
	}
</script>

<style>
	.box{
		padding: 20rpx;
	}
	.btn{
		border-radius: 50rpx;
		border: 1px solid #cccccc7d;
		display: inline-block;
		width: 100rpx;
		height: 100rpx;
		text-align: center;
		background: #fff;
		position: fixed;
		bottom: 105rpx;
		right: 30rpx;
	}
	.btn2{
		border-radius: 50rpx;
		border: 1px solid #cccccc7d;
		display: inline-block;
		width: 100rpx;
		height: 100rpx;
		text-align: center;
		background: #fff;
		position: fixed;
		bottom: 225rpx;
		right: 30rpx;
	}
</style>
